<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%=num%></h1>
    <div class="list">

    </div>
    <script src="http://localhost:3001/socket.io/socket.io.js"></script>
    <input type="text" name="" onchange="say(event)" value="">
    <script type="text/javascript">
      const socket = io.connect("localhost:3001");
      const listDOM = document.querySelector(".list");
      socket.on('newsay',word=>{
        console.log(word);
        const pDOM = document.createElement("p");
        pDOM.innerText = word;
        listDOM.insertAdjacentElement("beforeEnd",pDOM);
      });
      function say(event){
        socket.emit('say',event.target.value);
      };
    </script>
  </body>
</html>
